import { _decorator, Component, math, Node, tween, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ButtonClick')
export class ButtonClick extends Component {
    @property(Node)
    button1: Node = null!; // 第一个按钮

    @property(Node)
    button2: Node = null!; // 第二个按钮

    @property(Node)
    button3: Node = null!; // 第三个按钮

    start() {
        // 给第一个按钮添加点击事件
        this.button1.on('click', this.onButton1Click, this);

        // 给第二个按钮添加点击事件
        this.button2.on('click', this.onButton2Click, this);
    }

    // 第一个按钮点击后的动画效果
    onButton1Click() {
        // 使用四元数表示旋转
        let rotateQuat = new math.Quat();
        math.Quat.fromEuler(rotateQuat, 0, 0, 45); // 将 45 度旋转转化为四元数

        tween(this.button1)
            .to(0.2, { scale: new math.Vec3(1.2, 1.2, 1) }) // 放大
            .to(0.2, { scale: new math.Vec3(1, 1, 1) })     // 恢复原始大小
            .to(0.2, { rotation: rotateQuat })               // 设置旋转为四元数
            .to(0.2, { rotation: new math.Quat() })         // 恢复到原始旋转
            .start();
    }

    // 第二个按钮点击后的动画效果
    onButton2Click() {
        tween(this.button2)
            .to(0.5, { position: new math.Vec3(200, 0, 0) }) // 向右移动
            .to(0.5, { position: new math.Vec3(0, 0, 0) })   // 返回到原始位置
            .start();
    }

 
}


